<!--
 @description 主商品
 @fileName index.vue
 @author zengqiongying
 @created 2024/08/16 13:19:53
-->
<template>
  <div>
    <div class="table-title"><span class="c-red">*</span>主商品：</div>
    <div class="table-list-box">
      <el-table
        style="width: 100%"
        :data="productList"
        header-row-class-name="table-list-header"
        highlight-current-row
      >
        <!-- <el-table-column type="index" width="50" /> -->
        <el-table-column prop="skuName" label="主商品名称" />
        <el-table-column prop="mdmCode" label="产品编码" />
        <el-table-column prop="mdmName" label="产品名称" />
        <el-table-column prop="productState" label="在产状态" width="100px">
          <template v-slot="{row}">
            {{ getDictName('PRODUCT_STATE', row.productState) }}
          </template>
        </el-table-column>
        <el-table-column prop="purchaseHandle" label="采购状态" width="100px">
          <template v-slot="{row}">
            {{ getDictName('PURCHASE_HANDLE', row.purchaseHandle) }}
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="70" fixed="right" align="center">
          <template v-slot="{row}">
            <el-button class="my-button-txt" type="text" size="mini" @click="handleOpenDlg">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddProductDlg :visible.sync="showAdd" @change="handleAddChange" />
  </div>
</template>

<script>
import AddProductDlg from './AddProductDlg'
import { saveMainProduct } from '@/api/productCombine/detail'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'ConfigMainProduct',
  components: { AddProductDlg },
  props: {
    combineId: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dictData: {},
      productList: [
        {
          skuName: '',
          mdmCode: '',
          mdmName: '',
          productState: '',
          purchaseHandle: '',
          createBy: '',
          createTime: ''
        }
      ],
      showAdd: false
    }
  },
  watch: {
    detail: {
      handler(d, oldVal) {
        for (const k in this.productList[0]) {
          this.$set(this.productList[0], k, (d && d[k]) || '')
        }
      },
      immediate: true,
      deep: true
    }
  },

  async created() {
    this.dictData = await getDictByPatchType(['PRODUCT_STATE', 'PURCHASE_HANDLE'])
  },
  methods: {
    getDictName(typeCode, dictCode) {
      const tmps = this.dictData[typeCode] || []
      const d = tmps.find(v => v.dictCode === dictCode)
      return (d && d.dictName) || dictCode
    },
    handleOpenDlg() {
      this.showAdd = true
    },
    handleAddChange(d) {
      const data = {
        productCombinationId: this.combineId,
        skuId: d.id
      }
      saveMainProduct(data).then(res => {
        if (res.success === 1) {
          this.$emit('refresh')
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.my-button-txt{
  padding: 0;
  color:$--color-primary;
}
.table-title{
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.5;
  .c-red{
    color: #f00;
  }
}
</style>
